<template>
	<view class="wrap" :style="{top}"  @touchmove.stop.prevent="setTouchMove">
		<view class="btn_list"  id="right-nav">
			<view class="btn" @click="car" v-if="showCart">
				<text class="cartNum">{{cartNum > 99 ? '99+' : cartNum}}</text>
				<image src="@/static/images/cart-icon.png" mode="aspectFill"></image>
			</view>
			<!-- <view class="btn" @click="wxService">
				<image :src="HTTP_REQUEST_URL+'/imgs/new2.png'" mode="aspectFill"></image>
			</view> -->
			<button open-type="contact" class="btn">
				<image :src="HTTP_REQUEST_URL+'/imgs/new2.png'" mode="aspectFill"></image>
			</button>
			<view class="btn" @click="makePhone" v-if="showPhone">
				<image src="@/static/images/new1.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL} from "@/config/app.js"
	import {
		siteConfig
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex"
	export default {
		name: "hoverBtn",
		props: {
			top: {
				type: String,
				default: '65%'
			},
			showCart: {
				type: Boolean,
				default: true
			},
			showPhone: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				// top: "545",
				HTTP_REQUEST_URL
			};
		},
		computed: mapGetters(['cartNum']),
		created() {
			this.getConfig()
		},
		methods: {
			// showModal() {
			// 	this.$emit('showModal', true)
			// },
			getConfig() {
				siteConfig().then(res => {
					console.log(res.data);
					this._kefu_phone = res.data.kefu_phone
				}).catch(err => {
					console.error(err.msg);
				});
			},
			wxService() {
				uni.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc6a58d64ae222f4a2'
					},
					corpId: 'wwefb265b5ab9e6efc',
					success(res) {},
					fail(err) {
						uni.showToast({
							title: err.errMsg,
							icon: 'none',
							duration: 2000
						});
					}
				})
				
			},
			makePhone() {
				console.log(this._kefu_phone);
				uni.makePhoneCall({
					phoneNumber: this._kefu_phone //仅为示例
				});
			},
			setTouchMove(e) {
				return
				var that = this;
				if (e.touches[0].clientY < 545 && e.touches[0].clientY > 66) {
					that.top = e.touches[0].clientY
					// that.setData({
					// 	top: e.touches[0].clientY
					// })
				}
			},
			car() {
				uni.switchTab({
					url: '/pages/order_addcart/order_addcart'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		// top:65%;
		position: fixed;
		color: white;
		z-index: 20;
		right: 15rpx;
		.btn_list {
			
			.btn {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				// overflow: hidden;
				margin-top: 30rpx;
				position: relative;
				// background: #fff;
				background-color: transparent;
				.cartNum {
					position: absolute;
					display: flex;
					
					justify-content: center;
					align-items: center;
					width: 40rpx;
					height: 40rpx;
					top: -16rpx;
					right: -4rpx;
					color: #fff;
					font-size: 20rpx;
					background-color: #FD502F;
					border-radius: 50%;
					padding: 4rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>